<#-- User: soft Date: 2018/11/14 10:22 -->
<#assign list="active">
<#include "header.ftl">
<style>
  .pull-left-a {
    position: absolute;
    left: 15px;
  }
  tbody tr td label {
    display: inline-block;
    margin: 0;
    width: 100%;
    height: 100%;
  }
</style>
<article class="content">
  <div class="col-xs-12">
    <h4 style="cursor: pointer;"
        class="title pull-left" @click="getPage(true)">报名列表</h4>
    <div class="pull-right" style="padding: 15px;">
      <div class="pull-left">
        <button @click="exportExcel" class="btn btn-sm btn-info">导出</button>
      </div>
      <div class="pull-left">
        <div v-if="years.length>1" class="pull-left" style="width: 80px; margin: 0 5px">
          <select v-model="query.datetime" class="form-control sm-input">
            <option value="">年份</option>
            <option v-for="y in years" :value="y">{{y}}</option>
          </select>
        </div>
        <div class="pull-left" style="width: 80px; margin: 0 5px">
          <select class="form-control sm-input" v-model="searchKey">
            <option value="stuId">学号</option>
            <option value="name">姓名</option>
          </select>
        </div>
        <div class="pull-left" style="width: 120px;">
          <form @submit.prevent="searchInfo">
            <input class="form-control sm-input" :placeholder="keyName" v-model="searchVal">
          </form>
        </div>
      </div>
    </div>
  </div>
  <div style="min-height: 500px;" class="col-xs-12 table-responsive">
    <table class="table-bordered table table-striped" style="margin-bottom: 0;">
      <thead>
      <tr>
        <td width="60">序号</td>
        <td>姓名</td>
        <td>学号</td>
        <td>班级</td>
        <td>性别</td>
        <td>手机号</td>
        <td>邮箱</td>
        <td>意向</td>
        <td>状态</td>
        <td>报名时间</td>
        <td width="80">自我描述</td>
        <td width="160">操作</td>
      </tr>
      </thead>
      <tbody>
        <tr v-if="regs.length <= 0" class="text-center">
          <td colspan="15">暂无报名数据</td>
        </tr>
      <tr is="tr-list" v-for="(reg, index) in regs"
          :index="index" :reg="reg"
          :reject_="reject_" :pass_="pass_"></tr>
      </tbody>
    </table>
    <div v-if="page.totalPages > 1" class="pull-right" style="padding: 18px 18px 0;">
      <button @click="allChecked" class="btn btn-xs btn-default">全选</button>
      <button @click="reject_(getIdsAndIndexs())" class="btn btn-xs btn-warning">驳回</button>
      <button @click="pass_(getIdsAndIndexs())" class="btn btn-xs btn-info">通过</button>
      <button @click="deleteAll(getIdsAndIndexs())" class="btn btn-xs btn-danger">删除</button>
    </div>
  </div>
  <div v-if="page.totalPages > 1" class="col-xs-12 col-lg-12 text-center">
    <navigation :pages="page.totalPages" :current.sync="page.pageNum" @navpage="gotoPage"/>
  </div>
</article>
<template id="list">
  <tr>
    <td>
      <label>
        <input :name="'check-'+reg.id"
               :data-id="reg.id" type="checkbox"> {{index + 1}}
      </label>
    </td>
    <td>{{reg.name}}</td>
    <td>{{reg.stuId}}</td>
    <td>{{reg.grade}}</td>
    <td>{{reg.sex}}</td>
    <td>{{reg.tel}}</td>
    <td>{{reg.email}}</td>
    <td>
      <span class="label label-info">{{reg.group}}</span>
    </td>
    <td>
      <span :class="'status-'+reg.status"></span>
    </td>
    <td>{{reg.datetime}}</td>
    <td>
      <button @click="showIntro" class="btn btn-xs btn-info">查看</button>
    </td>
    <td>
      <button @click="reject" class="btn btn-xs btn-warning">驳回</button>
      <button @click="pass" class="btn btn-xs btn-info">通过</button>
      <button @click="delete_" class="btn btn-xs btn-danger">删除</button>
    </td>
  </tr>
</template>
<script>
  var vm = new Vue({
    el: '.content',
    data: {
      regs: [],
      page: {
        pageNum: 1,
        totalPages: 1
      },
      query: {
        name: null,
        stuId: null,
        datetime: ''
      },
      years: [],
      searchKey: 'stuId',
      searchVal: ''
    },
    computed: {
      keyName: function () {
        if (this.searchKey === 'stuId') return '学号';
        return '姓名';
      }
    },
    watch: {
      'query.datetime': function (nv) {
        this.getPage();
      }
    },
    methods: {
      exportExcel: function() {
        var q = '';
        for (var key in this.query) {
          var v = this.query[key] || '';
          q += (key + '=' + v + '&');
        }
        window.open('${root}/excel/export?' + q, '_top');
      },
      searchInfo: function() {
        if (this.searchVal !== '') {
          this.query = {};
          if (this.searchKey === 'stuId') {
            this.query.stuId = this.searchVal;
          } else {
            this.query.name = this.searchVal;
          }
          this.getPage();
        }
      },
      getIdsAndIndexs: function() {
        var obj = {ids: []};
        var all = $('input[name^=check]');
        for (var i = 0; i < all.length; i++) {
          var inp = all[i];
          if (inp.checked) {
            var id = $(inp).data('id');
            obj.ids.push(id);
            obj[id] = i;
          }
        }
        return obj;
      },
      reject_: function(obj) {
        var self = this;
        $.post('${root}/recruit/reject', {ids: obj.ids}, function (data) {
          if (data.success) {
            for (var i in obj.ids) {
              var id = obj.ids[i];
              self.regs[obj[id]].status -= 1;
            }
            layer.msg(data.payload, {icon: 6, time: 1200});
            self.allChecked(false);
          } else if (data.code === 201) {
            for (var j in data.payload) {
              var id = data.payload[j];
              self.regs[obj[id]].status -= 1;
            }
            layer.msg("部分驳回成功！", {icon: 6, time: 1200});
            self.allChecked(false);
          } else {
            layer.msg(data.msg, {icon: 5, time: 1200});
          }
        });
      },
      pass_: function(obj) {
        var self = this;
        $.post('${root}/recruit/pass', {ids: obj.ids}, function (data) {
          if (data.success) {
            for (var i in obj.ids) {
              var id = obj.ids[i];
              self.regs[obj[id]].status += 1;
            }
            layer.msg(data.payload, {icon: 6, time: 1200});
            self.allChecked(false);
          } else if (data.code === 201) {
            for (var j in data.payload) {
              var id = data.payload[j];
              self.regs[obj[id]].status += 1;
            }
            layer.msg("部分通过成功！", {icon: 6, time: 1200});
            self.allChecked(false);
          } else {
            layer.msg(data.msg, {icon: 5, time: 1200});
          }
        });
      },
      allChecked: function(checked_) {
        var all = $('input[name^=check]');
        if (isAllChecked(all) || !checked_) {
          all.prop('checked', false);
        } else {
          all.prop('checked', true);
        }
      },
      gotoPage: function(page) {
        this.page.pageNum = page;
        this.getPage();
      },
      getPage: function (no) { // no 是否在重置查询条件
        var self = this;
        if (no) {
          self.searchVal = '';
          self.query = {};
        }
        $.post('${root}/recruit/page/' + self.page.pageNum, self.query, function (data) {
          self.regs = [];
          if (data.success) {
            self.regs = data.payload.content;
            self.page.pageNum = data.payload.number + 1;
            self.page.totalPages = data.payload.totalPages;
          }
        });
      },
      deleteAll: function(obj) {
        var self = this;
        layer.confirm('确定删除已选内容？', {title: '提示框', icon: 3}, function (index) {
          var ids = obj.ids;
          $.post('${root}/recruit/deleteAll', {ids: ids}, function (data) {
            if (data.success || data.code === 201) {
              layer.msg(data.payload || data.msg, {icon: 6, time: 1200});
              self.allChecked(false);
              self.getPage();
            } else {
              layer.msg(data.payload, {icon: 5});
            }
          });
          layer.close(index);
        });
      },
      deleteFromList: function (index) {
        this.regs.splice(index, 1);
        if (this.regs.length <= 0) {
          this.page.pageNum -= 1;
        }
        this.getPage();
      }
    },
    components: {
      'tr-list': {
        props: ['index', 'reg', 'reject_', 'pass_'],
        template: '#list',
        methods: {
          reject: function() {
            var p = {ids: [this.reg.id]}; p[this.reg.id] = this.index;
            this.reject_(p);
          },
          pass: function() {
            var p = {ids: [this.reg.id]}; p[this.reg.id] = this.index;
            this.pass_(p);
          },
          showIntro: function() {
            var content = '<div class="intro">' + this.reg.intro + '</div>';
            layer.open({
              type: 1,
              title: '个人描述：[<b style="color:darkcyan;">'+this.reg.name+'</b>]',
              offset: '140px',
              move: false,
              area: ['600px', '300px'],
              content: content
            });
          },
          delete_: function () {
            var self = this;
            layer.confirm('确定删除：[' + self.reg.name + ']？', {title: '提示框', icon: 3}, function (index) {
              $.post('${root}/recruit/delete/' + self.reg.id, function (data) {
                if (data.success) {
                  layer.msg("删除成功！", {icon: 6, time: 1200});
                  self.$root.deleteFromList(self.index)
                } else {
                  layer.alert("FOR: " + data.msg, {title: "删除失败", icon: 5}, function (index) {
                    layer.close(index);
                  });
                }
              });
              layer.close(index);
            });
          }
        }
      }
    },
    created: function () {
      var self = this;
      this.getPage();
      $.post('${root}/recruit/years', function (data) {
        console.log(data);
        if (data.success) {
          self.years = data.payload;
        }
      });
    }
  });

  function isAllChecked(allin) {
    for (var i = 0; i < allin.length; i++) {
      var inp = allin[i];
      if (!inp.checked) {
        return false;
      }
    }
    return true;
  }
</script>
<#include "footer.ftl">
